<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script>
		$('.fancybox').fancybox({
			openEffect	: 'none',
			closeEffect	: 'none',
            helpers: {
              title : {
                type : 'inside'
              },
			  thumbs: {
				width: 50,
				height: 50				
			  },
			},
        });
</script>
<style>
	.list_photo{
		width: 600px;
		position: relative;
		padding-top: 70px;
		padding-left: 30px;
	}
	
	.list_photo img{
		width: 140px;
		height: 100px;
	}
	
	.photo_item{
		margin: 20px 0px 0px 20px;
		float: left;
		background: #fff;
		padding: 10px;
		box-shadow: 0 0 5px #000;
	}
	
	.photo_item .photo_des{
		width: 140px;
		height: 20px;
		text-align: center;
		background: #2c1b14;
		margin-top: 5px;
		color: #CE005E;
		text-transform: uppercase;
		font-weight: bolder;
		font-size: 15px;
	}
	
</style>
</head>
<body>
	<!--start login bar-->
	<div id="loginbar" style="display:none;">
		<table class="frmLogin">
			<tr>
				<td><label for="user">Tài Khoản: </label></td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td><label for="user">Mật Khẩu: </label></td>
				<td><input type="password"/></td>
			</tr>
		</table>
		<div class="button">
			<ul>
				<li><input type="button" name="btnLogin" value="Đăng Nhập"/></li>
				<li><input type="button" name="btnRegis" value="Đăng Ký"/></li>
			<ul>
		</div>
	</div>
	<!--end login bar-->
	<div id="wrap_main">
		<div id="top_bg">
			<div id="bottom_bg">
				<div id="bottom">
					<div id="wrap_bottom">
						<div id="top">
							<div id="top_bar">
								<!--start header-->
								<div id="header">
									<script>
										$("#l_login").live("click",function(){
											if($("div#loginbar").hasClass("active")){
												$("div#loginbar").slideUp();
												$("div#loginbar").removeClass("active");
											}
											else{
												$("div#loginbar").slideDown();
												$("div#loginbar").addClass("active");
											}
										});
									</script>
									<div class="link_login">
										<a id="l_login" href="javascript:void(0)">Đăng nhập</a>
									</div>
									<div class="title">
										<a href="#">Bizu.vn</a>
									</div>
									<div id="des">
										<h2>This is my blog</h2>
									</div>
									<div id="menu">
										<ul>
											<li><a href="#">Home</a></li>
											<li><a href="#">Blog</a></li>
											<li><a href="#">Contact</a></li>
											<li><a href="#">About</a></li>
										</ul>
									</div>
								</div>
								<!--end header-->
								<!--start main_content-->
								<div class="clearfix" id="main_content">
									<!--start sidebar-->
									<div class="clearfix" id="sidebar_right">
										<div id="note">
											<div id="welcome">
												<h1>Welcome to Bizu.vn</h1>
											</div>
											<div id="welcome_text">
												<p>Chào mừng bạn đến với blog của tôi :D ! Chúc bạn có những giây phút vui vẻ với blog của tôi :)</p>
											</div>
										</div>
										<div id="sidebar_main">
											<ul>
												<li>
													<div class="menu_sidebar">
														<h2 class="title_news">Top 5 Entry</h2>
															<ul id="list_news_a">
																<li><a href="#">Bài viết số 1</a></li>
																<li><a href="#">Bài viết số 2</a></li>
																<li><a href="#">Bài viết số 3</a></li>
																<li><a href="#">Bài viết số 4</a></li>
																<li><a href="#">Bài viết số 5</a></li>
															</ul>
													</div>
													<div class="menu_sidebar">
														<h2 class="title_news">Top 5 News</h2>
															<ul id="list_news_a">
																<li><a href="#">Bài viết số 1</a></li>
																<li><a href="#">Bài viết số 2</a></li>
																<li><a href="#">Bài viết số 3</a></li>
																<li><a href="#">Bài viết số 4</a></li>
																<li><a href="#">Bài viết số 5</a></li>
															</ul>
													</div>
													<div class="menu_sidebar">
														<h2 class="title_news">Top 5 Video</h2>
															<ul id="list_news_a">
																<li><a href="#">Bài viết số 1</a></li>
																<li><a href="#">Bài viết số 2</a></li>
																<li><a href="#">Bài viết số 3</a></li>
																<li><a href="#">Bài viết số 4</a></li>
																<li><a href="#">Bài viết số 5</a></li>
															</ul>
													</div>
												</li>
											</ul>
										</div>
									</div>
									<!--end sidebar-->
									<!--start content-->
									<div class="clearfix" id="content">
										<!--start show photo-->
										<div class="post_item">
											<div class="post_top">
												<div class="post_bottom">
													<div class="list_photo">
														<!--start photo-->
															<div class="photo_item">
																<div class="photo">
																	<a rel="gallery" class="fancybox" href="images/1.jpg" title="tran le cuong"><img src="images/1.jpg" /></a>
																</div>
																<div class="photo_des">
																	<span class="photo_title">photo no.1</span>
																</div>
															</div>
														<!--end photo-->
														<!--start photo-->
															<div class="photo_item">
																<div class="photo">
																	<a rel="gallery" class="fancybox" href="images/2.jpg" title="tran le cuong"><img src="images/2.jpg" /></a>
																</div>
																<div class="photo_des">
																	<span class="photo_title">photo no.1</span>
																</div>
															</div>
														<!--end photo-->
														<!--start photo-->
															<div class="photo_item">
																<div class="photo">
																	<a rel="gallery" class="fancybox" href="images/3.jpg" title="tran le cuong"><img src="images/3.jpg" /></a>
																</div>
																<div class="photo_des">
																	<span class="photo_title">photo no.1</span>
																</div>
															</div>
														<!--end photo-->
														<!--start photo-->
															<div class="photo_item">
																<div class="photo">
																	<a rel="gallery" class="fancybox" href="images/avatar.jpg" title="tran le cuong"><img src="images/avatar.jpg" /></a>
																</div>
																<div class="photo_des">
																	<span class="photo_title">photo no.1</span>
																</div>
															</div>
														<!--end photo-->
													</div>
													<div class="clear"></div>
												</div>
											</div>
										</div>
										<!--end show photo-->
									</div>
									<div class="clear"></div>
									<!--end content-->
								</div>
								<!--end main_content-->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>